<nz-spin [nzSpinning]="isLoading">
  <nz-upload [(nzFileList)]="fileList" [nzBeforeUpload]="beforeUpload">
    <button nz-button>
      <span nz-icon nzType="upload"></span>
      Select File
    </button>
  </nz-upload>
  <button
    nz-button
    [nzType]="'primary'"
    (click)="handleUpload()"
    [disabled]="fileList.length === 0"
    style="margin-top: 16px"
  >
    {{ isLoading ? 'Uploading' : 'Start Upload' }}
  </button>
  <div style="margin-top: 8px">
    <textarea rows="10" nz-input [ngModel]="userMatadatas | json" *ngIf="userMatadatas.length > 0"></textarea>
    <nz-empty *ngIf="userMatadatas.length === 0"></nz-empty>
  </div>

  <div style="margin-top: 25px">
    <nz-space>
      <input
        *nzSpaceItem
        nz-input
        placeholder="输入objectId, 多个使用','相隔"
        [(ngModel)]="downloadIds"
        style="width: 300px"
      />
      <button *nzSpaceItem nz-button nzType="primary" (click)="download()">下载文件</button>
    </nz-space>
  </div>

  <div style="margin-top: 25px">
    <nz-space>
      <input *nzSpaceItem nz-input placeholder="输入一个objectId" [(ngModel)]="deleteId" style="width: 300px" />
      <button *nzSpaceItem nz-button nzType="primary" (click)="delete()"> 删除 </button>
    </nz-space>
  </div>

  <div style="margin-top: 25px">
    <nz-space>
      <input *nzSpaceItem nz-input placeholder="输入一个objectId" [(ngModel)]="presignedUrlId" style="width: 300px" />
      <nz-radio-group *nzSpaceItem [(ngModel)]="method">
        <label nz-radio nzValue="GET">GET</label>
        <label nz-radio nzValue="POST">POST</label>
        <label nz-radio nzValue="PUT">PUT</label>
        <label nz-radio nzValue="DELETE">DELETE</label>
      </nz-radio-group>
      <button *nzSpaceItem nz-button nzType="primary" (click)="getPresignedUrl()"> 获取PresignedUrl </button>
    </nz-space>

    <textarea style="margin-top: 8px" rows="4" nz-input [ngModel]="presignedUrl" readonly></textarea>
  </div>
</nz-spin>
